<template>
  <div class="department-management">
    <el-card>
      <template #header>
        <div class="flex items-center justify-between">
          <span class="text-xl font-semibold text-gray-800">部门管理</span>
          <el-button v-permission="'department:create'" type="primary" @click="handleAdd">
            <el-icon>
              <Plus />
            </el-icon>新增部门
          </el-button>
        </div>
      </template>

      <!-- 搜索表单 -->
      <!-- <DictStatusSearch dict-code="seachStatus" @search="handleSearch" @reset="handleReset" /> -->

      <!-- 部门树形表格 -->
      <el-table :data="departmentTree" v-loading="loading" row-key="id" border style="width: 100%">
        <el-table-column prop="name" label="部门名称" />
        <el-table-column prop="description" label="部门描述" show-overflow-tooltip />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <DictTag dict-type="sys_status" :value="row.status" size="small" />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          :formatter="tableDateTimeFormatter"
        />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button v-permission="'department:update'" type="primary" size="small" @click="handleEdit(row)">
              <el-icon>
                <Edit />
              </el-icon>编辑
            </el-button>
            <el-button v-permission="'department:delete'" type="danger" size="small" @click="handleDelete(row)">
              <el-icon>
                <Delete />
              </el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 部门表单对话框 -->
    <DepartmentFormDialog
      v-model="dialogVisible"
      :department-data="currentDepartment"
      @success="handleSuccess"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getDepartmentTree, deleteDepartment } from "@/api/department";
import DepartmentFormDialog from "@/components/DepartmentFormDialog.vue";
import DictStatusSearch from "@/components/DictStatusSearch.vue";
import DictTag from "@/components/DictTag.vue";
import { tableDateTimeFormatter } from "@/utils/format";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";

const loading = ref(false);
const departmentTree = ref([]);
const dialogVisible = ref(false);
const currentDepartment = ref(null);
const searchForm = reactive({
  status: "",
});

const loadDepartments = async () => {
  loading.value = true;
  try {
    const params = {
      ...searchForm,
    };
    const data = await getDepartmentTree(params);
    departmentTree.value = data || [];
  } catch (error) {
    ElMessage.error("获取部门列表失败");
  } finally {
    loading.value = false;
  }
};

const handleAdd = () => {
  currentDepartment.value = null;
  dialogVisible.value = true;
};

const handleEdit = (row) => {
  currentDepartment.value = { ...row };
  dialogVisible.value = true;
};

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm("确定要删除该部门吗？", "提示");
    await deleteDepartment(row.id);
    ElMessage.success("删除成功");
    loadDepartments();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("删除失败");
    }
  }
};

const handleSuccess = () => {
  dialogVisible.value = false;
  loadDepartments();
};

const handleSearch = (params) => {
  Object.assign(searchForm, params);
  loadDepartments();
};

const handleReset = (params) => {
  Object.assign(searchForm, params);
  loadDepartments();
};

onMounted(() => {
  loadDepartments();
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>